<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>找回密码</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<link rel="stylesheet" href="../css/mint-ui.css" />
		<link rel="stylesheet" href="../css/animate.css" />
		<link rel="stylesheet" href="../css/main.css" />
	<style scoped="scoped">
		.mint-field .mint-cell-title{
			width:70px;
		}
	</style>
	</head>
	<body>
		<div id="app">
			<img src="../images/logo.jpg" width="100%" class="animated zoomIn"/>
			<mt-field label="手机号" placeholder="请输入手机号" 
				v-model="phone" :attr="{maxlength:11}"></mt-field>
			<div class="forpw" style="position: relative;">
				<mt-field label="验证码" placeholder="请输入验证码" 
					v-model="code" :attr="{maxlength:6}" class="codeForget"></mt-field>
				<button id="getCodes" @click="getMa" class="getCode"
					style="font-size: 14px;border:none;background: none;top:16px">点击获取验证码</button>
			</div>
			<mt-field label="新密码" placeholder="请输入6-20位数字字母组合新密码" 
				type="password" v-model="password" :attr="{maxlength:20}"></mt-field><br />
			<mt-button type="primary" size="large" class="animated zoomInUp" 
				@click="changePw">完成</mt-button>
				
		</div>
	</body>
	
	<script type="text/javascript" src="../js/layer.js" ></script>
	<script type="text/javascript" src="../js/vue.js" ></script>
	<script type="text/javascript" src="../js/mint-ui.js" ></script>
	<script type="text/javascript" src="../js/axios.min.js" ></script>
	<script type="text/javascript" src="../js/rem.js" ></script>
	<script>
//去除所有空格
function removeSpace(str){
	return str.replace(/\s+/g,"");
}
//倒计时
let countdown=90;  
let phoneReg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
let passReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
function setTime(val) {  
    if (countdown == 0) {  
        val.removeAttribute("disabled");  
        val.innerHTML="获取验证码";  
        countdown = 90;  
        return false;  
    } else {  
        val.setAttribute("disabled", true);  
        val.innerHTML="重新发送(" + countdown + "s)";  
        countdown--;  
    }  
    setTimeout(function() {  
        setTime(val);  
    },1000);  
} 
		
		
		new Vue({
			el:"#app",
			data:{
				phone:"",
				code:"",
				password:""
			},
			created(){
				
			},
			methods:{
				changePw:function(){
					
//					layer.open({
//						content:"1111",
//						style:"",
//						btn:["确定","取消"],
//						time:3
//					});
					this.phone=removeSpace(this.phone);
					this.password=removeSpace(this.password);
					if(this.phone == "" || !phoneReg.test(this.phone)){
						this.$toast("请输入正确的手机号码格式");return;
					}else if(this.code == ""){
						this.$toast("请输入验证码");return;
					}else if(this.password == "" || !passReg.test(this.password)){
						this.$toast("请输入6-20位数字字母组合密码");return;
					}
					
					axios.post('http://106.13.55.49/api/jdUser/resetPw',{
						phone:this.phone,
						password:this.password,
						code:this.code
					}).then((data) => {
							console.log(data);
							if(data.data.status == 200){
								this.$toast({message:"重置密码成功",duration:1500});
								setTimeout(function(){
									location.href="login.html";
								},2000);
							}else{
								this.$toast(data.data.message);return;
							}
					})
				},
				getMa:function(){
					let codes=document.getElementById("getCodes");
					if(this.phone == "" || !phoneReg.test(this.phone)){
						this.$toast("请输入正确的手机号码格式");return;
					}else{
						setTime(codes);
						axios.post("http://106.13.55.49/api/jdUser/phoneCode",{
							phone:this.phone,
							type:"reset"
						}).then(data => {
							console.log(data);
						});
					}
				}
			}
			
		})
	</script>
</html>
